import React, {Component} from 'react'
import axiox from 'axios'
import { Table, Pagination } from 'antd';
import DetailModal from './DetailModal'
import { localTimeString } from '../../util/datehelper'

class PropertyTable extends Component {

  getTableData(page, param) {
    axiox.post('http://127.0.0.1:8081/sysuser/list/alluser', {
      page,
      param
    })
    .then((response) => {
      let data = response.data.data.results
      data = data.map(item => {
        item.key = '' + item.id;
        return item;
      })
      this.setState({
        data: data,
        dataTotal: response.data.data.total
      })
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  componentDidMount() {
    this.getTableData({
      pageNum: 1,
      pageSize: this.state.page.defalutPageSize
    })
  }

  constructor() {
    super();
    this.state = {
      modalVisible: false,
      columns: [{
        title: <span style={{color: "red"}}>Name</span>,
        dataIndex: 'name',
        sorter: (a, b) => a.name.length - b.name.length,
        }, {
          title: 'Age',
          dataIndex: 'age',
          defaultSortOrder: 'descend',
          sorter: (a, b) => a.age - b.age,
        }, {
          title: 'Address',
          dataIndex: 'address'
        }, {
          title: 'CreateTime',
          dataIndex: 'createTime',
          render: (timestamp) => {
            return <span>{localTimeString(timestamp)}</span>
          }
        }, { 
          title: 'Action', 
          dataIndex: '', 
          key: 'x', 
          render: (text, row, index) => {
            return <a href="javascript:;" onClick={()=>this.onClick(text, row, index)}>Detail</a>
        }
      }],
      data: [],
      page: {
        defalutPageSize: 2,
        defaultCurrent: 1,
        current: 1
      },
      dataTotal: 0,
      title: '',
      modalData: {}
    }
  }
  
  onChange(pagination, filters, sorter) {
      // console.log('params', pagination, filters, sorter);
  }

  onClick(text, row, index) {
    this.setState({
      modalVisible: true,
      title: "DetailInfo",
      modalData: {
        'text': text,
        'row': row,
        'index': index
      }
    })
  }

  onCloseModal = () => {
    this.setState({
      modalVisible: false,
      title: "",
      modalData: {}
    })
  }

  onPageNumChange = (page, pageSize) => {
    this.getTableData({
      pageNum: page,
      pageSize
    })
    let statePage = this.state.page;
    statePage.current = page;
    this.setState({
      page: statePage
    })
  }

  render() {

    return (
      <div>
        <DetailModal 
          visible={this.state.modalVisible} 
          title={this.state.title} 
          modalData={this.state.modalData}
          onClose={this.onCloseModal}
        />
        <Table 
          columns={this.state.columns} 
          dataSource={this.state.data} 
          onChange={this.onChange} 
          pagination={false}
          bordered 
          size='middle'
        />
        <div style={{marginTop: '5px', textAlign: 'right'}}>
          <Pagination
              current={this.state.page.current}
              total={this.state.dataTotal}
              showTotal={total => `Total ${total} items`}
              pageSize={this.state.page.defalutPageSize}
              defaultCurrent={this.state.page.defaultCurrent}
              onChange={this.onPageNumChange}
          />
        </div>
        
      </div>
    );
  }
}

export default PropertyTable;
